import React from 'react';
import { observer } from 'mobx-react-lite';

const Intro: React.FC = observer(() => {
  return (
    <div className="w-[439px] pt-2 ml-[32px] text-white">
      {/* 标题部分 */}
      <div className="mb-2">
        <h1 className="text-2xl font-bold text-white mb-2 text-[20px] leading-[22px]">
          {t('gameDetail.transaction')}
        </h1>
        <p className="text-[#BDBCBE]">{t('gameDetail.result')}</p>
      </div>

      {/* How to Play 按钮 */}
      <button className="p-2 bg-[#2E3033] text-[16px] text-[#F422FF] rounded-lg mb-4">
        {t('gameDetail.HowtoPlay')}
      </button>

      {/* 示例区域 */}
      <div className="bg-[#242223] p-4 rounded-lg mb-6 flex items-center justify-between">
        <div>
          <p className="text-[#7D7C7F] mb-2"> {t('gameDetail.Example')}:</p>
          <p className="text-white">0.008193011345 ··· e5s</p>
        </div>
        <div className="w-[84px] h-[77px] bg-[url('./gameDetail/boxBg.png')] bg-cover flex items-center justify-center ">
          <span className="text-3xl font-bold text-black">9</span>
        </div>
      </div>

      {/* 下注说明 */}
      <p className="text-white mb-4 text-[12px]">
        <span className="mb-4 text-[#BDBCBE]">{t('gameDetail.Betting')}: </span>
        {t('gameDetail.single')}
      </p>

      {/* 下注选项 */}
      <div className="space-y-3">
        <div className="h-[32px] w-fit bg-[#FA8B20] text-black font-medium pr-[8px] pl-[8px] relative">
          <div className="w-[16px] h-[32px] object-contain absolute left-[-16px] top-0 ">
            <img src={`./gameDetail/oranl.png`} />
          </div>
          <div className="w-[16px] h-[32px] object-contain absolute right-[-16px] top-0 ">
            <img src={`./gameDetail/oranr.png`} />
          </div>
          {t('gameDetail.Small')} : 0,1,2,3,4 {t('gameDetail.mortgage')}
        </div>
        <div className="h-[32px] w-fit bg-[#FFCC02] text-black font-medium pr-[8px] pl-[8px] relative">
          <div className="w-[16px] h-[32px] object-contain absolute left-[-16px] top-0 ">
            <img src={`./gameDetail/yell.png`} />
          </div>
          <div className="w-[16px] h-[32px] object-contain absolute right-[-16px] top-0 ">
            <img src={`./gameDetail/yelr.png`} />
          </div>
          {t('gameDetail.Big')} : 0,1,2,3,4 {t('gameDetail.mortgage')}
        </div>
      </div>
    </div>
  );
});

export default Intro;
